window.onload = function () {
    var container = document.querySelector("#container");
    var canvas = document.createElement("canvas");
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    container.appendChild(canvas);

    window.onresize = function () {
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
    };

    const gl = canvas.getContext('webgl');

    const VSHADHER_SOURCE =
        'attribute vec4 a_Position;\n' +
        'attribute vec4 a_Color;\n' +
        'varying vec4 c_Color;\n' +
        'uniform mat4 u_ProjMatrix;\n' +
        'uniform mat4 u_ViewMatrix;\n' +
        'uniform mat4 u_ModelMatrix;\n' +
        'void main(){' +
        '       gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;\n' +
        '       c_Color = a_Color;\n' +
        '}\n';
    const FSHADER_SOURCE =
        '#ifdef GL_ES\n' +
        'precision mediump float;\n' +
        '#endif\n' +
        'varying vec4 c_Color;\n' +
        'void main(){\n' +
        '   gl_FragColor = c_Color;\n' +
        '}\n';
    const createShader = (type, souce) => {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, souce);
        gl.compileShader(shader);
        const info = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!info) {
            const err = gl.getShaderInfoLog(shader);
            // alert(err === '');
            gl.deleteShader(shader)
            console.log('编译报错信息为' + err);
            return null;
        }
        return shader;
    }
    const createProgram = (vshader, fshader) => {
        const vertexshader = createShader(gl.VERTEX_SHADER, vshader); //创建顶点着色器
        const fragmentShader = createShader(gl.FRAGMENT_SHADER, fshader); // 创建片着色器
        if (!vertexshader || !fragmentShader) {
            console.log('创建着色器失败');
            gl.deleteShader(fragmentShader);
            gl.deleteShader(vertexshader);
            return null;
        }
        const program = gl.createProgram();
        gl.attachShader(program, vertexshader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linkState) {
            const err = gl.getProgramInfoLog(program);
            console.log('获取链接报错信息', err)
            gl.deleteShader(fragmentShader)
            gl.deleteShader(vertexshader)
            gl.deleteProgram(program);
            return null
        }
        return program;
    }
    const program = createProgram(VSHADHER_SOURCE, FSHADER_SOURCE)
    gl.useProgram(program)


    var viewMatrix = new Matrix4();
    viewMatrix.setLookAt(0, 0, 5, 0.0, 0.0, -100.0, 0.0, 1.0, 0.0)
    const u_ViewMatrix = gl.getUniformLocation(program, 'u_ViewMatrix');
    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);



    var modelMatrix = new Matrix4();
    modelMatrix.setTranslate(0, 0, 0);
    const u_ModelMatrix = gl.getUniformLocation(program, 'u_ModelMatrix');
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

    const initBuffers = () => {
        var verticesColors = new Float32Array([
            0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 最后面的绿色三角形
            0.25, -1.0, -4.0, 0.4, 1.0, 0.4,
            1.25, -1.0, -4.0, 1.0, 0.4, 0.4,

            0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
            0.25, -1.0, -2.0, 1.0, 1.0, 0.4,
            1.25, -1.0, -2.0, 1.0, 0.4, 0.4,

            0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
            0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

            //左侧三角形
            -0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 最后面的绿色三角形
            -1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
            -0.25, -1.0, -4.0, 1.0, 0.4, 0.4,

            -0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
            -1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
            -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,

            -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
            -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            -0.25, -1.0, 0.0, 1.0, 0.4, 0.4,
        ]);

        const size = verticesColors.BYTES_PER_ELEMENT;
        const n = 18;
        const vertexColorbuffer = gl.createBuffer();
        const a_Position = gl.getAttribLocation(program, 'a_Position');
        const a_Color = gl.getAttribLocation(program, 'a_Color');
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
        gl.enableVertexAttribArray(a_Position);
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3)
        gl.enableVertexAttribArray(a_Color);
        // 正射投影矩阵
        const projMatrix = new Matrix4();
        projMatrix.setPerspective(30, 500 / 500, 1.0, 100.0);
        const u_ProjMatrix = gl.getUniformLocation(program, 'u_ProjMatrix');
        gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, n)
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
    }
    initBuffers();
    document.onkeydown = function (e) {
        keydown(e)
    }
    let d = 0.05
    let x = 0;
    let y = 0;

    let tx = 0;
    let ty = 0;
    let tz = 0;
    const keydown = (e) => {
        console.log(e.keyCode)
        if (e.keyCode === 38) {
            // 向上键
            y += d;
        } else if (e.keyCode === 40) {
            // 向下键
            y -= d;
        } else if (e.keyCode === 37) {
            // 左键
            x += d;
        } else if (e.keyCode === 39) {
            // 右键
            x -= d;
        } else if (e.keyCode === 87) {
            // 上
            ty += d;
        } else if (e.keyCode === 83) {
            // 向下键
            ty -= d;
        } else if (e.keyCode === 65) {
            // 左键
            tx -= d;
        } else if (e.keyCode === 68) {
            // 右键
            tx += d;
        }else if (e.keyCode === 107) {
            // 右键
            tz += d;
        }else if (e.keyCode === 109) {
            // 右键
            tz -= d;
        }
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(x, y, 5, 0.0, 0.0, -100.0, 0.0, 1.0, 0.0);
        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

        var modelMatrix = new Matrix4();
        modelMatrix.setTranslate(tx, ty, tz);
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 18)
    }
}

